<template>
  <div class="sky" ref="sky">
    <canvas class="canvas" ref="canvas"> </canvas>
    <div class="bg-img"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    let _this = this;
    _this.$refs.sky.width = window.innerWidth;
    _this.$refs.sky.height = window.innerHeight;
    function Star(id, x, y) {
      this.id = id;
      this.x = x;
      this.y = y;
      this.r = Math.floor(Math.random() * 2) + 1;
      var alpha = (Math.floor(Math.random() * 10) + 1) / 10 / 2;
      this.color = "rgba(255,255,255," + alpha + ")";
    }
    Star.prototype.draw = function() {
      ctx.fillStyle = this.color;
      ctx.shadowBlur = this.r * 2;
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
      ctx.closePath();
      ctx.fill();
    };
    Star.prototype.move = function() {
      this.y -= 1;
      if (this.y <= -10) this.y = _height + 10;
      this.draw();
    };
    Star.prototype.die = function() {
      stars[this.id] = null;
      delete stars[this.id];
    };
    var canvas = _this.$refs.canvas,
      ctx = canvas.getContext("2d"),
      _width = _this.$refs.sky.width,
      _height = _this.$refs.sky.height,
      stars = [],
      initStarsPopulation = 80;
    // console.log(_width,_height)
    setStarsSize();
    __init__();
    function setStarsSize() {
      canvas.setAttribute("width", _width);
      canvas.setAttribute("height", _height);
    }
    function __init__() {
      ctx.strokeStyle = "white";
      ctx.shadowColor = "white";
      for (var i = 0; i < initStarsPopulation; i++) {
        stars[i] = new Star(
          i,
          Math.floor(Math.random() * _width),
          Math.floor(Math.random() * _height)
        );
      }
      ctx.shadowBlur = 0;
      animate();
    }
    function animate() {
      ctx.clearRect(0, 0, _width, _height);
      for (var i in stars) {
        stars[i].move();
      }
      requestAnimationFrame(animate);
    }
  }
};
</script>

<style lang="less" scoped>
.sky {
  overflow: hidden;
  background: radial-gradient(
    220% 105% at bottom center,
    #f7f7b6 10%,
    #e96f92 40%,
    #75517d 65%,
    #1b2947
  );
  .canvas {
    overflow: hidden;
  }
  .bg-img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 9rem;
    height: 8.0625rem;
    background-image: url("../../assets/bg.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
}
</style>
